<template>
    <div class="my-home">
        <mt-swipe :auto="0" style="height: 180px;width: 100%">
            <mt-swipe-item><img src="../../img/ber-3.png" style="height: 200px;width: 100%"></mt-swipe-item>
            <mt-swipe-item><img src="../../img/ber-1.png" style="height: 200px;width: 100%"></mt-swipe-item>
            <mt-swipe-item><img src="../../img/ber-2.png" style="height: 200px;width: 100%"></mt-swipe-item>
        </mt-swipe>
        <table class="first-table" style="padding: 6px 0">
            <tr>
                <td @click="clickRouter('用水统计')">
                    <icon clazz="icon-tongji1"></icon>
                    <div>用水统计</div>
                </td>
                <td @click="clickRouter('运行数据')">
                    <icon clazz="icon-yunxingshuju"></icon>
                    <div>用水数据</div>
                </td>
                <!--<td @click="clickRouter('缴费记录')">-->
                    <!--<icon clazz="icon-jilu2"></icon>-->
                    <!--<div>缴费记录</div>-->
                <!--</td>-->
                <td @click="clickRouter('费用账单')">
                    <icon clazz="icon-feiyong"></icon>
                    <div>费用账单</div>
                </td>
                <td @click="clickRouter('快速缴费')">
                    <icon clazz="icon-kuaisuzhaodi"></icon>
                    <div>快速缴费</div>
                </td>

            </tr>
            <tr>

                <td @click="clickRouter('业务记录')">
                    <icon clazz="icon-yue1"></icon>
                    <div>业务记录</div>
                </td>
                <td @click="clickRouter('账户余额')">
                    <icon clazz="icon-xiaoxi"></icon>
                    <div>账户余额</div>
                </td>
                <td @click="clickRouter('绑定户号')">
                    <icon clazz="icon-bangding"></icon>
                    <div>绑定户号</div>
                </td>
                <td @click="$router.push({name:'accountSwitch',params:{id:'index'}})">
                    <icon clazz="icon-jilu2"></icon>
                    <div>切换户号</div>
                </td>
            </tr>
        </table>
        <template v-if="householdNo">
            <div class="break"></div>
            <mt-cell class="p-cell" :title="address">
                <icon slot="icon" clazz="icon-qiapian2" style="width: 20px;height: 20px;"></icon>
                <mt-button plain @click="$router.push({name:'accountSwitch',params:{id:'index'}})"
                           style="height: 20px;">
                    <icon clazz="icon-qiehuan1" style="width: 16px;height: 20px"></icon>
                </mt-button>
            </mt-cell>
            <table>
                <tr class="second-table">
                    <td @click="click">
                        <p><span v-if="table.month">{{table.month.volume}}</span><span v-else>--</span>m³</p>
                        <p>{{table.monthNum}}月水量</p>
                    </td>
                    <td @click="click">
                        <p><span v-if="table.month">{{table.month.price}}</span><span v-else>--</span>元</p>
                        <p>{{table.monthNum}}月水费</p>
                    </td>
                    <td style="color: orangered" @click="$router.push({name:'waterRemainder',params:{id:'首页'}})">
                        <p><span v-if="table.account">{{table.account.balance}}</span><span v-else>--</span>元</p>
                        <p>账户余额</p>
                    </td>
                </tr>
            </table>
            <mt-cell class="p-cell">
                <div slot="title">当前用水量处于<span style="color: red">{{table.level?table.level:1}}</span>阶梯</div>
            </mt-cell>
        </template>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                table: {},
                householdNo: app.util.localStorage('user.householdNo'),
            }
        },
        props: {
            address: {
                type: String,
                default: ''
            },
            refresh: {
                type: Boolean,
                default: false
            },

        },
        methods: {
            click() {
                app.util.localStorage('dateRoute',this.table.date);
                this.$router.push({
                    name: 'terminalDataEcharts',
                    params: {
                        month: this.table.date
                    }
                })

            },
            loadData() {
                app.ajax.get(app.config.api.index.home, {}, (res) => {
                    if (res.s === 0) {
                        this.table = res.data;
                        let date = this.table.date.split('-');
                        this.table.monthNum = Number(date[1]);

                        this.householdNo = app.util.localStorage('user.householdNo');
                    }
                }, (err) => {
                    app.util.localStorage('user.householdNo', '');
                    app.util.localStorage('user.address', '');
                    app.util.localStorage('user.name', '');
                    app.util.localStorage('user.chargeWayTxt', '');
                    app.util.localStorage('user.ladderVolumeFirst', '');
                    app.util.localStorage('user.ladderVolumeSecond', '');
                    app.util.localStorage('user.ladderVolumeThree', '');
                    setTimeout(() => {
                        this.$router.push({name: 'accountBinding02'})
                    }, 2000)

                })
            },
            clickRouter(name) {
                if (app.config.setting.platform !== 'wechat' && !app.util.sessionStorage('token')) {
                    this.$router.push({path: '/login'});
                } else {
                    if (name === '用水统计') {
                        this.$router.push({name: 'waterCharge', params: {id: 'index'}})
                    } else if (name === '缴费记录') {
                        this.$router.push({name: 'waterReport', params: {id: 'index'}})
                    } else if (name === '费用账单') {
                        this.$router.push({name: 'paymentHistory'});
                    } else if (name === '运行数据') {
                        this.$router.push({name: 'terminalData', params: {id: 'index'}});
                    } else if (name === '快速缴费') {
                        this.$router.push({name: 'waterPayment02', params: {id: 'index'}})
                    } else if (name === '业务记录') {
                        this.$router.push({name: 'serviceRecord', params: {id: 'index'}});
                    } else if (name === '绑定户号') {
                        this.$router.push({name: 'accountBinding', params: {id: 'index'}});
                    } else if (name === '账户余额') {
                        this.$router.push({name: 'waterRemainder', params: {id: '首页'}});
                    }
                }
            }
        },
        mounted() {
            if (this.refresh) {
                if (app.util.sessionStorage('token')) {
                    this.loadData();
                }
            }
        }
    }
</script>
<style>
    .my-home table {
        width: 100%;
    }

    .my-home .first-table td {
        width: 25%;
        padding: 10px 0;
    }

    .my-home .first-table td div {
        padding-top: 5px;
    }

    .my-home .first-table .icon {
        width: 40px;
        height: 40px;
    }

    .my-home .second-table td {
        width: 33%;
        border: solid 1px gainsboro;
        border-right: 0;
    }

    .my-home .second-table td p:first-child {
        font-weight: bolder;
        margin: 5px;
    }

    .my-home .second-table td p:last-child {
        font-size: 14px;
        opacity: .8;
        margin: 5px;
    }

    .my-home .mint-button--primary {
        border-radius: 20px;
        width: 60px;
        height: 30px;
        line-height: 30px;
        margin-top: 0;
        margin-bottom: 10px;
        /*box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3), inset 0 -6px 10px #0072C6;*/
    }

    .my-home .mint-field-other {
        right: 0 !important;
    }

    .my-home .mint-field .mint-cell-value {
        margin-right: 0 !important;
        width: 100%;
    }

    .my-home .p-cell .mint-cell-wrapper {
        line-height: 20px;
    }
</style>
